<!-- AI模板 -->
<template>
  <div class="dashboard-editor-container">
    <div class="xxx" style="margin-top: 10px;">
      <div style="display:flex;justify-content:space-between;">
        <partitionTree :nodeData="nodeData" :defaultProps="defaultProps" :dialogName="'分类'" @handleNodeClick="handleNodeClick" @submitTemplete="submitTemplete" @deleteNode="deleteNode" ref="partitionTree" @toggleVisibility="toggleVisibility"></partitionTree>
        <div :style="{ width:containerWidth}"  class="box" style="background:#fff;padding:20px;border: 1px solid #ddd;border-radius: 4px;box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);">
          <el-button type="primary" @click="addModer">添加软件</el-button>
          <el-table stripe border :data="tableData" style="width: 100%; margin-top: 15px" height="730">
            <el-table-column label="序号" width="80" type="index" :index='(index) => { return (index + 1) + (pageNum - 1) * pageSize }'> </el-table-column>
            <el-table-column label="软件分类" prop="Class" align="left" show-overflow-tooltip></el-table-column>
            <el-table-column label="软件名称" prop="Name"  align="left" show-overflow-tooltip></el-table-column>
            <el-table-column label="软件描述" prop="Descp"  align="left" show-overflow-tooltip></el-table-column>
            <el-table-column label="软件版本" prop="Version"  align="left" show-overflow-tooltip></el-table-column>
            <el-table-column label="适用系统" show-overflow-tooltip prop="OSClass"  align="left"></el-table-column>
            <el-table-column label="系统类型" show-overflow-tooltip prop="OSType"  align="left">
              <template slot-scope="{row}">
                <span>{{ row.OSType ? row.OSType : '全部' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="安装文件" prop="OrigFileName"  align="left" show-overflow-tooltip></el-table-column>
            <el-table-column label="软件大小" prop="FileSize"  align="left" show-overflow-tooltip></el-table-column>
            <el-table-column label="操作" width="210px" align="left" fixed="right" >
              <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="changeModer(scope.row)">修改</el-button>
                <el-button size="mini" type="danger" @click="deleteModer(scope.row)">删除</el-button>
                <el-button size="mini" type="success" @click="downloadModer(scope.row)">下载</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <el-dialog 
      :close-on-click-modal="false" 
      :close-on-press-escape="false" 
      :visible.sync="moderVisible"
      :title="Action === 1 ? '添加软件' : '修改软件'" 
      v-el-drag-dialog @close="Moder = {}" width="30%">
      <el-form label-width="100px" :rules="rules" :model="Moder" ref="Moder">
        <el-form-item label="软件名称" prop="Name">
          <el-input placeholder="请输入软件名称" maxlength="16" :disabled="Action === 2" v-model.trim="Moder.Name"></el-input>
        </el-form-item>
        <el-form-item label="软件分类" prop="Class">
          <el-select v-model="Moder.Class" placeholder="请选择软件分类" style="width:100%">
            <el-option  v-for="item in partitionList" :key="item.Name" :label="item.Name" :value="item.Name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="软件版本" prop="Version">
          <el-input placeholder="请输入软件版本" oninput="value=value.replace(/[^0-9a-zA-Z.]/g,'')" maxlength="32" v-model="Moder.Version"></el-input>
        </el-form-item>
        <el-form-item label='适用系统:' prop="OSClass">
          <el-select v-model="Moder.OSClass" style="width:100%" placeholder="请选择适用系统">
            <el-option  label="Windows" value="Windows"></el-option>
            <!-- <el-option  label="Mac" value="Mac"></el-option>
            <el-option  label="Android" value="Android"></el-option>
            <el-option  label="Linux" value="Linux"></el-option> -->
            <el-option  label="Other" value="Other"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label='系统类型:' prop="OSType">
          <el-select v-model="Moder.OSType" style="width:100%" placeholder="请选择系统类型">
            <el-option label="全部" value=""></el-option>
            <el-option label="64" value="64"></el-option>
            <el-option label="32" value="32"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="软件描述" prop="Descp">
          <el-input placeholder="请输入软件描述" type="textarea" :rows="3"  v-model="Moder.Descp"></el-input>
        </el-form-item>
        <el-form-item label='上传软件:' v-show="Action === 1">
          <el-upload
            class="upload-demo"
            action="#"
            multiple
            ref="upload"
            :on-change="filechange"
            :http-request="uploadFile"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :limit="1"
            :on-exceed="handleExceed"
            :disabled="Action === 2"
            :file-list="fileList">
            <el-button size="small" type="primary" :disabled="Action === 2">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit()">确 定</el-button>
        <el-button type="info" @click="moderVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { connrequest, uploadfile, downloadfile } from '@/api/firstPage'
import { formatBytes, parseTime } from "@/utils/index.js";
import { getToken } from '@/utils/auth' // get token from cookie
import elDragDialog from "@/directive/el-drag-dialog"; 
import partitionTree from "@/components/partitionTree"; 
export default {
  directives: { elDragDialog },
  components: {
    partitionTree
  },
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      containerWidth: 'calc(100% - 240px)',
      tableData: [],
      nodeData: [],
      defaultProps: {
        children: 'Class',
        label: 'Name',
        Count: 'Count'
      },
      Attach: {},
      fileList: [],
      Action: 1,
      Moder: {},
      moderVisible: false,
      reSource: [],
      partitionList: [],
      rules:{
        Name: [
          {required: true, message: '请输入软件名称', trigger: 'blur'}
        ],
        Class: [
          {required: true, message: '请选择软件分类', trigger: 'change'}
        ],
      }
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.getData()
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
  },
  methods: {
    async getData() {
      const res = await connrequest('GetDictSoftwareTree')
      let partitionList = []
      res.Data.Name = res.Data.RootName //因为后端返回的所有分区名字叫RootName，子菜单又叫Name, 这里做个转换
      res.Data.disabled = true
      res.Data.edit = false
      res.Data.Class.map(item => {
        item.edit = false
        partitionList.push(item)
      })
      this.nodeData = [res.Data]
      this.partitionList = partitionList
      this.GetDictArea(this.PrimName)
    },
    async GetDictArea(Name){
      const data = {
        Filter:{
          Name: Name || ''
        }
      }
      const res = await connrequest('GetDictSoftware', data)
      this.tableData = res.Data
      if(Name === '' || Name === undefined){  //获取所有编码
        let partitionNumber = []
        res.Data.map(item => {
          item.FileSizeNum = item.FileSize  //保留原始软件大小的值，修改的时候用
          item.FileSize = item.FileSize ? formatBytes(item.FileSize) : 0
          partitionNumber.push(item.AreaCode)
        })
        this.partitionNumber = partitionNumber
      }
    },
    handleNodeClick(nodeData){
      const {data} = nodeData
      console.log(data.Name);
      let PrimName = data.Name === '所有软件' ? '' : data.Name
      this.PrimName = PrimName
      this.$set(this.Moder, 'Class', PrimName)
      this.GetDictArea(PrimName)
    },
    async submitTemplete(node){
      const data = {
        Data:{
          Action: node.Action,
          Detail:{
            Name: node.Name
          }
        }
      }
      const res = await connrequest('EditDictSoftwareTree', data)
      if(res.Status.StatusCode === 0){
        this.$message.success(node.Action === 1 ? '新增成功' : '修改成功')
        this.$refs.partitionTree.moderVisible = false
        this.getData()
      }
    },
    async deleteNode(node){
      if(node.Count > 0){
        this.$message.error('该分类下还有数据，请清空后再删除')
        return
      }
      const data = {
        Data:{
          Action: 3,
          Detail:{
            Name: node.Name
          }
        }
      }
      const res = await connrequest('EditDictSoftwareTree', data)
      if(res.Status.StatusCode === 0){
        this.$message.success('删除成功')
        this.getData()
      }
    },
    addModer(){
      this.Action = 1
      this.Moder = {
        Class: this.PrimName ? this.PrimName : this.partitionList[0]?.Name,
        OSType: '',
        OSClass: 'Windows',
      }
      this.$nextTick(() => {
        this.Attach = []
        this.fileList = []
        this.$refs.Moder.clearValidate();
      })
      this.moderVisible = true
    },
    changeModer(row){
      this.Action = 2
      this.Moder = {...row}
      if(row.Attach?.length > 0){
          row.Attach.map(item => {
          item.name = item.OrigFileName
          return item
        })
      }
      this.Attach = row.Attach || []
      this.fileList = row.Attach || []
      this.moderVisible = true
    },
    deleteModer(row){
      this.$confirm('此操作将永久删除该软件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const data = {
          Data: {
            Action: 3,
            Detail: {...row}
          }
        }
        const res = await connrequest('EditDictSoftware', data)
        if(res.Status.StatusCode === 0){
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getData()
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    async downloadModer(row){
      const a = document.createElement('a');
      a.style.display = 'none';
      a.target = '_blank';
      a.href = process.env.VUE_APP_BASE_API + '/software_dict/' + row.ResFileName;
      a.download = row.OrigFileName;
      a.click();
    },
    async submit(){
      if(this.Attach.length !== 1 && this.Action === 1){
        this.$message.error('请上传软件')
        return false
      }
      this.$refs['Moder'].validate(async (valid) => {
        if (valid) {
          const data = {
            Data: {
              Action: this.Action,
              Detail: {
                ...this.Moder,
                FileSize: this.Action === 1 ? this.FileSize : this.Moder.FileSizeNum,
                OrigFileName: this.Action === 1 ? this.Attach[0]?.OrigFileName : this.Moder.OrigFileName,
                ResFileName: this.Action === 1 ? this.Attach[0]?.ResFileName : this.Moder.ResFileName,
              }
            }
          }
          const res = await connrequest('EditDictSoftware', data)
          if(res.Status.StatusCode === 0){
            this.$message.success(this.Action === 1 ? '新增成功' : '修改成功')
            this.moderVisible = false
            this.getData()
          }
        }
      })
    },
    toggleVisibility(isHidden) {
      if(isHidden)
        this.containerWidth = '100%';
      else 
        this.containerWidth = 'calc(100% - 240px)';
    },
    filechange(file, fileList){
      let arr = []
      fileList.map(item => {
        arr.push({OrigFileName: item.name, ResFileName: item.uid + ''})
      })
      this.Attach = arr
    },
    async uploadFile(file){
      let formData = new FormData();
      formData.append('CmdCode', "UploadSoftwareDict");
      formData.append('OrigFileName', file.file.name);
      formData.append('ResFileName', file.file.uid);
      formData.append('file', file.file);
      formData.append('Token', getToken());
      const res = await uploadfile('UploadSoftwareDict',formData)
      if(res.Status.StatusCode === 0) {
        this.FileSize = file.file.size
        this.$message.success('文件上传成功')
      }
    },
    handlePreview(){},
    async handleRemove(file, fileList) {
      const data = {
        Data:{
          ResFileName: file.uid
        }
      }
      const res = await connrequest('DeleteSoftwareDictAttach', data)
      if(res.Status.StatusCode === 0){
        this.Attach = this.Attach.filter(item => item.uid !== file.uid);
        this.Attach = this.Attach.filter(item => item.ResFileName != file.uid);
        this.FileSize = 0
        this.$message.success('文件删除成功')
      }
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    }
  }
};
</script>
<style scoped>
.box {
  background-color: lightblue;
  transition: width 0.5s; /* 添加过渡动画 */
}

</style>
